<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('水费管理')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>项目：</label>
                                <input type="text" name="projectName"/>
                            </li>
                            <li>
                                <label>单位：</label>
                                <input type="text" name="unitName"/>
                            </li>
                            <li>
                                <label>楼层：</label>
                                <input type="text" name="floorName"/>
                            </li>
<!--                            <li>-->
<!--                                <label>水费月份：</label>-->
<!--                                <input type="text" id="etldt" placeholder="yyyyMM"  name="etldt"/>-->
<!--                            </li>-->
                            <li>
                                <label>水费月份：</label>
                                <div class="input-daterange input-group">
                                    <input type="text" name="etldtBegin" placeholder="请填写月份"/>
                                    <span>&nbsp;到&nbsp;</span>
                                    <input type="text" name="etldtOver" placeholder="请填写月份"/>
                                </div>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="guomao:waterRateManagement:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="guomao:waterRateManagement:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="guomao:waterRateManagement:remove">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-success" onclick="importExcel()" shiro:hasPermission="guomao:waterRateManagement:import" >
                    <i class="fa fa-upload"></i> 导入
                </a>
                <a class="btn btn-warning" onclick="allExportExcel()" shiro:hasPermission="guomao:waterRateManagement:waterExport">
                    <i class="fa fa-download"></i> 月度抄表导出
                </a>
                <a class="btn btn-warning" onclick="leaderExportExcel()" shiro:hasPermission="guomao:waterRateManagement:unitsExport">
                    <i class="fa fa-download"></i> 月度单位导出
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
     <th:block th:include="include :: footer" />
     <th:block th:include="include :: bootstrap-fileinput-js" />
     <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('guomao:waterRateManagement:edit')}]];
        var removeFlag = [[${@permission.hasPermi('guomao:waterRateManagement:remove')}]];
        var prefix = ctx + "guomao/waterRateManagement";
        var options;
        // $(function () {
        //     initEtldt();
        // })

        function query() {
            if (options != null && options != undefined) {
                var params = $("#bootstrap-table").bootstrapTable('getOptions');
                $("#bootstrap-table").bootstrapTable('refresh', params);
            } else {
                options = {
                    url: prefix + "/list",
                    createUrl: prefix + "/add",
                    updateUrl: prefix + "/edit/{id}",
                    removeUrl: prefix + "/remove",
                    importUrl: prefix + "/import",
                    importTemplateUrl: prefix + "/importTemplate",
                    leaderExportUrl: prefix + "/leaderExport",
                    allExportUrl: prefix + "/allExport",
                    uniqueId: "ammeterId",
                    modalName: "抄表信息",
                    columns: [{
                        checkbox: true
                    },
                        {
                            field: 'num',
                            title: '序号',
                        },
                        {
                            field: 'ammeterId',
                            title: '编号',
                            visible: false
                        },
                        {
                            field: 'projectName',
                            title: '项目'
                        },
                        {
                            field: 'unitName',
                            title: '单位'
                        },
                        {
                            field: 'floorName',
                            title: '楼层'
                        },
                        {
                            field: 'roomNum',
                            title: '房号'
                        },
                        {
                            field: 'checkMeterNum',
                            title: '表号'
                        },
                        {
                            field: 'degreePreA',
                            title: 'A表上期度数',
                            visible: false
                        },
                        {
                            field: 'degreeIssueA',
                            title: 'A表本期度数'
                        },
                        {
                            field: 'degreeA',
                            title: 'A表用水量',
                            visible: false
                        },
                        {
                            field: 'degreePreB',
                            title: 'B表上期度数',
                            visible: false
                        },
                        {
                            field: 'degreeIssueB',
                            title: 'B表本期度数'
                        },
                        {
                            field: 'degreeB',
                            title: 'B表用水量',
                            visible: false
                        },
                        {
                            field: 'degreePreC',
                            title: 'C表上期度数',
                            visible: false
                        },
                        {
                            field: 'degreeIssueC',
                            title: 'C表本期度数'
                        },
                        {
                            field: 'degreeC',
                            title: 'C表用水量',
                            visible: false
                        },
                        {
                            field: 'degreePreD',
                            title: 'D表上期度数',
                            visible: false
                        },
                        {
                            field: 'degreeIssueD',
                            title: 'D表本期度数'
                        },
                        {
                            field: 'degreeD',
                            title: 'D表用水量',
                            visible: false
                        },
                        {
                            field: 'degreePre',
                            title: '往期总度数',
                            visible: false
                        },
                        {
                            field: 'degreeIssue',
                            title: '本期总度数',
                            visible: false
                        },
                        {
                            field: 'degree',
                            title: '实用吨数'
                        },
                        {
                            field: 'etldt',
                            title: '水费月份'
                        },
                        {
                            field: 'issueDate',
                            title: '抄表时间'
                        },
                        {
                            field: 'multiplicationTerm',
                            title: '乘率'
                        },
                        {
                            field: 'unitPrice',
                            title: '单价'
                        },
                        {
                            field: 'amountMoney',
                            title: '金额'
                        },
                        {
                            field: 'remark',
                            title: '备注'
                        },
                        {
                            title: '操作',
                            align: 'center',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.ammeterId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                                actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.ammeterId + '\')"><i class="fa fa-remove"></i>删除</a>');
                                return actions.join('');
                            }
                        }]
                };
                $.table.init(options);
            }
        }

        /*导出接口*/
        function leaderExportExcel() {
            layer.open({
                type:1,
                title:["选择导出的水费月份","font-size:18px"],
                area:["400px","180px"],
                shade:false,
                anim:3,
                shade:0.3,
                content:$("#checkMonth").html(),
                btn:['确认'],
                yes:function () {
                    var month = $('#insertMonth').val();
                    var reg = /^\b[1-3]\d{3}(0[1-9]|1[0-2])$/;
                    if(month==null||month==""||month==undefined){
                        $.modal.alertError("请输入水费的年月")
                        return;
                    }else if(month.match(reg) == null){
                        $.modal.alertError("请确认水费的年月格式")
                        return;
                    }
                    $.modal.confirm("确认要导出选中的" + month + "月数据吗?", function() {
                        var url = table.options.leaderExportUrl;
                        var data = { "etldt": month};
                        $.modal.loading("正在导出数据，请稍后...");
                        $.post(url,data,function (res) {
                            if (res.code == web_status.SUCCESS) {
                                window.location.href = ctx + "common/download?fileName=" + encodeURI(res.msg) + "&delete=" + true;
                            } else if (res.code == web_status.WARNING) {
                                $.modal.alertWarning(res.msg)
                            } else {
                                $.modal.alertError(res.msg);
                            }
                            $.modal.closeLoading();
                            layer.closeAll();
                        })
                    });
                }
            })
        }

        function allExportExcel() {
            layer.open({
                type:1,
                title:["选择导出的水费月份","font-size:18px"],
                area:["400px","180px"],
                shade:false,
                anim:3,
                shade:0.3,
                content:$("#checkMonth").html(),
                btn:['确认'],
                yes:function () {
                    var month = $('#insertMonth').val();
                    var reg = /^\b[1-3]\d{3}(0[1-9]|1[0-2])$/;
                    if(month==null||month==""||month==undefined){
                        $.modal.alertError("请输入水费的年月")
                        return;
                    }else if(month.match(reg) == null){
                        $.modal.alertError("请确认水费的年月格式")
                        return;
                    }
                    $.modal.confirm("确认要导出选中的" + month + "月数据吗?", function() {
                        var url = table.options.allExportUrl;
                        var data = { "etldt": month };
                        $.modal.loading("正在导出数据，请稍后...");
                        $.post(url,data,function (res) {
                            if (res.code == web_status.SUCCESS) {
                                window.location.href = ctx + "common/download?fileName=" + encodeURI(res.msg) + "&delete=" + true;
                            } else if (res.code == web_status.WARNING) {
                                $.modal.alertWarning(res.msg)
                            } else {
                                $.modal.alertError(res.msg);
                            }
                            $.modal.closeLoading();
                            layer.closeAll();
                        })
                    });
                }
            })

        }

        /**
         * 导入
         * */
        function importExcel(formId, width, height) {
            table.set();
            var currentId = $.common.isEmpty(formId) ? 'importTpl' : formId;
            var _width = $.common.isEmpty(width) ? "400" : width;
            var _height = $.common.isEmpty(height) ? "230" : height;
            layer.open({
                type: 1,
                area: [_width + 'px', _height + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: '导入' + table.options.modalName + '数据',
                content: $('#' + currentId).html(),
                btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 取消'],
                // 弹层外区域关闭
                shadeClose: true,
                btn1: function(index, layero){
                    var file = layero.find('#drfile').val();
                    if (file == '' || (!$.common.endWith(file, '.xls') && !$.common.endWith(file, '.xlsx'))){
                        $.modal.msgWarning("请选择后缀为 “xls”或“xlsx”的文件。");
                        return false;
                    }
                    var index = layer.load(2, {shade: false});
                    $.modal.disable();
                    var formData = new FormData(layero.find('form')[0]);
                    $.ajax({
                        url:prefix + "/importExcel",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function (result) {
                            if (result.code == web_status.SUCCESS) {
                                $.modal.closeAll();
                                $.modal.alertSuccess(result.msg);
                                $.table.refresh();
                            } else if (result.code == web_status.WARNING) {
                                layer.close(index);
                                $.modal.enable();
                                $.modal.alertWarning(result.msg)
                            } else {
                                layer.close(index);
                                $.modal.enable();
                                $.modal.alertError(result.msg);
                            }
                        }
                    });
                }
            });
        }

        // function initEtldt() {
        //     var date = new Date();
        //     var year = date.getFullYear();
        //     var month = date.getMonth() + 1;
        //     if(month == 0){
        //         month = 12;
        //         year = year - 1;
        //     }
        //     if(month < 10){
        //         month = "0" + month;
        //     }
        //     $('#etldt').val(""+year+month);
        // }

    </script>
</body>

<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="drfile" name="file"/>
            <div class="mt10 pt5">
                <input type="checkbox" id="updateSupport" name="updateSupport" title="如果参数已经存在，更新这条数据。"> 是否更新已经存在的参数数据
                &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs" shiro:hasPermission="guomao:waterRateManagement:import"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件，导入的月份以第一行月份批次为准！！！
            </font>
        </div>
    </form>
</script>

<!-- 月份选择 -->
<script type="text/template" id="checkMonth">
    <form class="mt20 mb10">
        <div style="margin: 20px;">
            <span style="color: red;">请输入要导出的水费月份（yyyyMM，例202101）</span>
            <input type="text" class="form-control" id="insertMonth" >
        </div>
    </form>
</script>


</html>